// 扩展设置面板
// 扩展管理相关设置

import React from 'react';
import { SettingItem } from '../components/SettingItem';
import { BaseSetting, SettingsCategory, SettingType } from '../../../types/settings';

const extensionSettings: BaseSetting[] = [
  {
    id: 'extensions.autoUpdate',
    name: '自动更新扩展',
    description: '自动检查并更新已安装的扩展',
    category: SettingsCategory.Extensions,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'updates',
    tags: ['扩展', '自动更新', '检查']
  },
  {
    id: 'extensions.checkUpdateInterval',
    name: '更新检查间隔',
    description: '检查扩展更新的时间间隔（小时）',
    category: SettingsCategory.Extensions,
    type: SettingType.Number,
    defaultValue: 24,
    currentValue: 24,
    group: 'updates',
    validation: {
      min: 1,
      max: 168
    },
    tags: ['扩展', '更新', '间隔']
  },
  {
    id: 'extensions.allowPrerelease',
    name: '允许预发布版本',
    description: '允许安装和更新预发布版本的扩展',
    category: SettingsCategory.Extensions,
    type: SettingType.Boolean,
    defaultValue: false,
    currentValue: false,
    group: 'updates',
    tags: ['扩展', '预发布', '版本']
  }
];

const settingGroups = [
  {
    id: 'updates',
    name: '更新设置',
    description: '扩展更新相关设置'
  }
];

export const ExtensionSettingsPanel: React.FC = () => {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          扩展设置
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          管理扩展的安装、更新和配置
        </p>
      </div>

      {settingGroups.map((group) => {
        const groupSettings = extensionSettings.filter(s => s.group === group.id);
        
        return (
          <div key={group.id} className="space-y-4">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                {group.name}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {group.description}
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="divide-y divide-gray-200 dark:divide-gray-700">
                {groupSettings.map((setting) => (
                  <div key={setting.id} className="px-4">
                    <SettingItem setting={setting} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
